<template>
    <div class="login_container">
        <div class="login_box">
            <!-- 头像区域 -->
            <div class="avatar_box">
                <img src="../assets/vue.svg" alt="">
            </div>
            <div id="login-form">
                <a-form :label-col="labelCol" class="login_form" :wrapper-col="wrapperCol">
                    <a-form-item label="账号:" v-bind="validateInfos.username">
                        <a-input v-model:value="loginForm.username"
                            @blur="validate('username', { trigger: 'blur' }).catch(() => { })">
                            <template #prefix>
                                <UserOutlined class="site-form-item-icon" />
                            </template>
                        </a-input>
                    </a-form-item>
                    <a-form-item label="密码:" v-bind="validateInfos.password">
                        <a-input-password v-model:value="loginForm.password"
                            @blur="validate('password', { trigger: 'blur' }).catch(() => { })">
                            <template #prefix>
                                <LockOutlined class="site-form-item-icon" />
                            </template>
                        </a-input-password>
                    </a-form-item>
                    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                        <a-button type="primary" @click.prevent="onSubmit">Login</a-button>
                        <a-button style="margin-left: 10px" @click="reset">Reset</a-button>
                    </a-form-item>
                </a-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Form, message } from 'ant-design-vue';
import { reactive, toRaw } from 'vue';
import { login } from '@/api/Admin.js';
import { useRouter } from 'vue-router';
import md5 from 'js-md5';
import { IResult } from '@/types';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { useAdminStore } from '@/store/AdminStore';
import { storeToRefs } from 'pinia';
import { IAdminInfo } from '@/types/index';
const router = useRouter();
const adminStore = useAdminStore();
const { loginState, avatar } = storeToRefs(adminStore);
const { changeLoginState, setAvatar, setSignature, setAdminId  } = adminStore;

const useForm = Form.useForm;
const loginForm = reactive({
    username: "",
    password: ""
});

const labelCol = { span: 4 },
    wrapperCol = { span: 14 };

const { resetFields, validate, validateInfos } = useForm(
    loginForm,
    reactive({
        username: [
            {
                required: true,
                message: '请输入账户',
                trigger: 'blur'
            },
            {
                min: 3,
                max: 16,
                message: '账号的长度必须为 3 到 16',
                trigger: 'blur'
            },
        ],
        password: [
            {
                required: true,
                message: '请务必输入密码',
                trigger: 'blur'
            },
            {
                min: 3,
                max: 32,
                message: '密码的长度必须为 3 到 32',
                trigger: 'blur'
            }
        ],
    }),
);
const onSubmit = () => {
    validate()
        .then(async res => {
            // console.log(res, typeof toRaw(loginForm));
            let form = {
                username: res.username,
                password: md5(res.password)
            }
            const result = await login(form) as IResult;
            if (result.code !== 20007) {
                message.warning(result.msg);
                return;
            }
            const adminInfo = result.data.adminInfo as IAdminInfo;
            router.push("/home");
            message.success(result.msg);
            setAdminId(adminInfo.adminId);
            changeLoginState(true);
            setAvatar(adminInfo.header)
            setSignature(adminInfo.signature);
        }).catch(err => {
            // console.log('error', err);
            message.error(err.message);
            changeLoginState(false);
        });
};
const reset = () => {
    resetFields();
};
</script>

<style scoped>
.login_container {
    background-color: #FF3CAC;
    background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
    /* background-color: #2b4b6b; */
    height: 100%;
}

/*     使用定位完成局中布局 */
.login_box {
    width: 450px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3),
}

#login-form {
    margin-left: 20px;
}

.avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
}

.avatar_box img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
}

.btns {
    display: flex;
    justify-content: flex-end;
}

.login_form {
    position: absolute;
    bottom: 0;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}
</style>